#page4_3body{
	width: 100%;
	height: 100%;
	position: relative;
}

#page4_3fatherbox{
	width: 66%;
	height: 66%;
	position: relative;
	top:25%;
	left:17%;
}
#page4_3leftpt{
	width:18%;
	height: 100%;
	position: absolute;
	left: 0;
}
#page4_3leftpt img{
	width: 100%;
	height: 90%;
}
#page4_3right{
	width: 80%;
	height:100%;
	position: relative;
	left: 20%;
	min-width: 550px;
}
/* 每一个盒子 */
.page4_3box1,.page4_3box2,.page4_3box3,.page4_3box4,.page4_3box5{
	width: 19%;
	height: 100%;
	margin-left:1%;
	float: left; 
	position: relative;
	top: 120%;
	min-width:100px;
}
.page4_3boxtp{
	width: 100%;
	/* height: 26%; */
  height: auto;

}
.page4_3boxtp img{
	width: 100%;
	height: 100%;
}
.page4_3xxbox{
	width: 100%;
	height: 6%;
	margin-top: 5%;
	font-size: 0.3em;
	position: relative;
	/* border: 1px solid lightgray; */
}
.page4s1{
	position:absolute;
    top:0px;
    left:0px;
    border-bottom: 1px solid red;
    width: 100%;
    transition:transform 0.3s ease-in;
   transform:scale(0,1); 
   z-index: 100;
}
.page4s2{
	position:absolute;
    top:0px;
    left:0px;
    border-left: 1px solid red;
    height: 100%;
    transition:transform 0.3s ease-in;
   transform:scale(1,0); 
    z-index: 100;
}
.page4s3{
	position:absolute;
    bottom:0px;
    left:0px;
    border-bottom: 1px solid red;
    width: 100%;
    transition:transform 0.3s ease-in;
   transform:scale(0,1); 
    z-index: 100;
}
.page4s4{
	position:absolute;
    top:0px;
    right :0px;
    border-left: 1px solid red;
    height: 100%;
    transition:transform 0.3s ease-in;
   transform:scale(1,0); 
    z-index: 100;
}


.page4_3xxname{
	width: 35%;
	height: 100%;
	position: absolute;
	left: 0;
	color: gray;
	font-size: 0.8em;
	line-height: 25px;
}
.page4_3xxDesigner{
	width: 63.5%;
	height: 90%;
	position: absolute;
	top: 2%;
	left: 35%;
	background-color:#454545;
	color: lightgray;
	font-size: 0.8em;
	line-height: 20px;

}
.page4_3xxwenzi{
	width: 95%;
	height: 50%;
	margin-top: 5%;
	font-size: 0.3em;
	text-align: left;
	color:#666666;
	line-height: 23px;
	overflow: hidden;

}

.page4_3box1:hover .page4s1{
    position:absolute;
    top:0px;
    left:0px;
    border-bottom: 1px solid red;
    width: 100%;
   transition:transform 0.3s ease-in;
    transform:scale(1,1);
}
.page4_3box1:hover .page4s2{
    position:absolute;
    top:0px;
    left:0px;
    border-left: 1px solid red;
    height: 100%;
   transition:transform 0.3s ease-in;
    transform:scale(1,1);
}
.page4_3box1:hover .page4s3{
    position:absolute;
    bottom:0px;
    left:0px;
    border-bottom: 1px solid red;
    width: 100%;
   transition:transform 0.3s ease-in;
    transform:scale(1,1);
}
.page4_3box1:hover .page4s4{
    position:absolute;
    top:0px;
    right :0px;
    border-left: 1px solid red;
    height: 100%;
   transition:transform 0.3s ease-in;
    transform:scale(1,1);
}
.page4_3box1:hover .page4_3xxname{
	color: red;
}
.page4_3box2:hover .page4s1{
    position:absolute;
    top:0px;
    left:0px;
    border-bottom: 1px solid red;
    width: 100%;
   transition:transform 0.3s ease-in;
    transform:scale(1,1);
}
.page4_3box2:hover .page4s2{
    position:absolute;
    top:0px;
    left:0px;
    border-left: 1px solid red;
    height: 100%;
   transition:transform 0.3s ease-in;
    transform:scale(1,1);
}
.page4_3box2:hover .page4s3{
    position:absolute;
    bottom:0px;
    left:0px;
    border-bottom: 1px solid red;
    width: 100%;
   transition:transform 0.3s ease-in;
    transform:scale(1,1);
}
.page4_3box2:hover .page4s4{
    position:absolute;
    top:0px;
    right :0px;
    border-left: 1px solid red;
    height: 100%;
   transition:transform 0.3s ease-in;
    transform:scale(1,1);
}
.page4_3box2:hover .page4_3xxname{
	color: red;
}
.page4_3box3:hover .page4s1{
    position:absolute;
    top:0px;
    left:0px;
    border-bottom: 1px solid red;
    width: 100%;
   transition:transform 0.3s ease-in;
    transform:scale(1,1);
}
.page4_3box3:hover .page4s2{
    position:absolute;
    top:0px;
    left:0px;
    border-left: 1px solid red;
    height: 100%;
   transition:transform 0.3s ease-in;
    transform:scale(1,1);
}
.page4_3box3:hover .page4s3{
    position:absolute;
    bottom:0px;
    left:0px;
    border-bottom: 1px solid red;
    width: 100%;
   transition:transform 0.3s ease-in;
    transform:scale(1,1);
}
.page4_3box3:hover .page4s4{
    position:absolute;
    top:0px;
    right :0px;
    border-left: 1px solid red;
    height: 100%;
   transition:transform 0.3s ease-in;
    transform:scale(1,1);
}
.page4_3box3:hover .page4_3xxname{
	color: red;
}
.page4_3box4:hover .page4s1{
    position:absolute;
    top:0px;
    left:0px;
    border-bottom: 1px solid red;
    width: 100%;
   transition:transform 0.3s ease-in;
    transform:scale(1,1);
}
.page4_3box4:hover .page4s2{
    position:absolute;
    top:0px;
    left:0px;
    border-left: 1px solid red;
    height: 100%;
   transition:transform 0.3s ease-in;
    transform:scale(1,1);
}
.page4_3box4:hover .page4s3{
    position:absolute;
    bottom:0px;
    left:0px;
    border-bottom: 1px solid red;
    width: 100%;
   transition:transform 0.3s ease-in;
    transform:scale(1,1);
}
.page4_3box4:hover .page4s4{
    position:absolute;
    top:0px;
    right :0px;
    border-left: 1px solid red;
    height: 100%;
   transition:transform 0.3s ease-in;
    transform:scale(1,1);
}
.page4_3box4:hover .page4_3xxname{
	color: red;
}
.page4_3box5:hover .page4s1{
    position:absolute;
    top:0px;
    left:0px;
    border-bottom: 1px solid red;
    width: 100%;
   transition:transform 0.3s ease-in;
    transform:scale(1,1);
}
.page4_3box5:hover .page4s2{
    position:absolute;
    top:0px;
    left:0px;
    border-left: 1px solid red;
    height: 100%;
   transition:transform 0.3s ease-in;
    transform:scale(1,1);
}
.page4_3box5:hover .page4s3{
    position:absolute;
    bottom:0px;
    left:0px;
    border-bottom: 1px solid red;
    width: 100%;
   transition:transform 0.3s ease-in;
    transform:scale(1,1);
}
.page4_3box5:hover .page4s4{
    position:absolute;
    top:0px;
    right :0px;
    border-left: 1px solid red;
    height: 100%;
   transition:transform 0.3s ease-in;
    transform:scale(1,1);
}
.page4_3box5:hover .page4_3xxname{
	color: red;
}


    /* 响应式代码 */
 @media all and (max-width: 1920px) {  /* pc */
           #page4_3rightxy{
           	display: none;
           }
        }

          @media all and (max-width:1027px) {  /* 平板*/
            #page4_3leftpt{
                display:none;
            }
            #page4_3right{
            	position: relative;
            	left:-30px;
            }
          
          
        }

         @media all and (max-width: 600px) { 
          #page4_3body{
          	display: none;
          }
          #page4_3rightxy{
          	display: block;
          	width: 100%;
          	height: 100%;
          	position: relative;
          	top:150px;
          	left: 60px;


          }
          .page4_3boxxy{
          	width: 35%;
          	float: left;
          	margin-right: 5px;
          	margin-top: 5px;
          }
          .page4_3xxboxxy{
          		height: 20px;
				margin-top: 5%;
				font-size: 0.3em;
				position: relative;
				border: 1px solid lightgray;
				line-height: 20px;
          }

      